<template>
    <div>
        <!-- 页面头部导航 -->
          <!-- 页面二级标题 -->
             <!-- 头部图标（此处未使用） -->
               <!-- 页面主标题 -->
        <el-page-header
            content="创建文章"          
            icon=""                   
            title="文章管理"            
        />

        <!-- 文章创建表单 -->
         <!-- 表单引用，用于验证和操作 -->
           <!-- 绑定表单数据模型 -->
            <!-- 表单验证规则 -->
             <!-- 标签宽度 -->
              <!-- 自定义样式类 -->
        <el-form
            ref="newsFormRef"           
            :model="newsForm"          
            :rules="newsFormRules"       
            label-width="80px"           
            class="demo-ruleForm"        
        >
            <!-- 标题输入项 -->
              <!-- 标签文本 -->
                <!-- 验证关联字段 -->
            <el-form-item
                label="标题"            
                prop="title"           
            >
                <el-input v-model="newsForm.title" /> <!-- 输入框，双向绑定标题 -->
            </el-form-item>

            <!-- 内容编辑项（使用自定义富文本编辑器） -->
             <!-- 标签文本 -->
               <!-- 验证关联字段 -->
            <el-form-item
                label="内容"             
                prop="content"         
            >
                <editor @event="handleChange" /> <!-- 自定义编辑器组件，监听内容变化 -->
            </el-form-item>

            <!-- 岗位类别选择项 -->
             <!-- 标签文本 -->
              <!-- 验证关联字段 -->
            <el-form-item
                label="岗位类别"         
                prop="job_category"     
            >
             <!-- 绑定岗位类别值 -->
               <!-- 样式类（间距控制） -->
                <!-- 占位提示 -->
                  <!-- 宽度占满 -->
                <el-select
                    v-model="newsForm.job_category"  
                    class="m-2"                     
                    placeholder="Select"             
                    style="width:100%"              
                >
                    <!-- 遍历岗位类别选项，动态生成下拉项 -->
                     <!-- 循环遍历选项数组 -->
                       <!-- 唯一键值 -->
                         <!-- 显示标签 -->
                          <!-- 选项值 -->
                    <el-option
                        v-for="item in job_category_options" 
                        :key="item.value"                
                        :label="item.label"              
                        :value="item.value"               
                    />
                </el-select>
            </el-form-item>

            <!-- 专业类别选择项 -->
               <!-- 标签文本 -->
                  <!-- 验证关联字段 -->
            <el-form-item
                label="专业类别"       
                prop="major_category" 
            >
             <!-- 绑定专业类别值 -->
              <!-- 样式类（间距控制） -->
               <!-- 占位提示 -->
                 <!-- 宽度占满 -->
                <el-select
                    v-model="newsForm.major_category"  
                    class="m-2"                        
                    placeholder="Select"               
                    style="width:100%"                
                >
                    <!-- 遍历专业类别选项，动态生成下拉项 -->
                     <!-- 循环遍历选项数组 -->
                       <!-- 唯一键值 -->
                        <!-- 显示标签 -->
                           <!-- 选项值 -->
                    <el-option
                        v-for="item in major_category_options" 
                        :key="item.value"                  
                        :label="item.label"                 
                        :value="item.value"               
                    />
                </el-select>
            </el-form-item>

            <!-- 提交按钮 -->
             <!-- 主按钮样式 -->
               <!-- 点击提交表单 -->
            <el-form-item style="margin-bottom: 300px;">
                <el-button
                    type="primary"       
                    @click="submitForm()"
                >添加文章</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
// 引入Vue组合式API
import { ref, reactive } from "vue";
// 引入自定义富文本编辑器组件
import editor from "@/components/editor/Editor";
// 引入路由和状态管理
import { useRouter} from "vue-router";
import { useStore } from 'vuex'
// 引入HTTP请求库和消息提示组件
import axios from "axios";
import { ElMessage } from "element-plus";

// 获取Vuex存储实例和路由实例
const store = useStore();
const router = useRouter();

// 表单引用和数据模型
const newsFormRef = ref(); // 表单引用，用于触发验证
const newsForm = reactive({ // 表单数据模型
  title: "",                // 文章标题
  content: "",              // 文章内容
  job_category: "job1",     // 岗位类别（默认值）
  major_category: "major1", // 专业类别（默认值）
  author: store.state.userInfo.id // 作者ID（从Vuex获取当前用户ID）
});

// 表单验证规则
const newsFormRules = reactive({
  title: [{ required: true, message: "请输入标题", trigger: "blur" }], // 标题必填验证
  content: [{ required: true, message: "请输入内容", trigger: "blur" }], // 内容必填验证
  job_category: [{ required: true, message: "请选择岗位分类", trigger: "blur" }], // 岗位类别必填验证
  major_category: [{ required: true, message: "请选择专业分类", trigger: "blur" }] // 专业类别必填验证
});

// 富文本编辑器内容变化回调函数
const handleChange = (data) => {
  newsForm.content = data; // 将编辑器内容同步到表单数据
};

// 岗位类别选项配置
const job_category_options = [
  { label: "岗位1", value: "job1" },
  { label: "岗位2", value: "job2" },
  { label: "岗位3", value: "job3" }
];

// 专业类别选项配置
const major_category_options = [
  { label: "专业1", value: "major1" },
  { label: "专业2", value: "major2" },
  { label: "专业3", value: "major3" }
];

// 表单提交处理函数
const submitForm = () => {
  newsFormRef.value.validate(async (valid) => { // 触发表单验证
    if (valid) { // 验证通过
      await axios.post("/article/add", newsForm); // 发送文章创建请求
      ElMessage.success("信息已添加"); // 显示成功提示
      router.push(`/information-manage/list`); // 跳转至文章列表页
    }
  });
};
</script>

<style lang="scss" scoped>
.el-form {
  margin-top: 50px; // 表单顶部间距，调整页面布局
}
</style>